<template>
  <div class="list-content">
    <div class="list-header clearfix">
      <div class="list-header-tit fl">我的办件</div>
      <div class="list-close fr" style="font-size: 16px;background:#ffffff;">
            <span @click="backHome">返回首页：</span>
        <img src="../../assets/image/backhome.png" style="width:24px;height:24px;" @click="backHome">
        &nbsp;
        <span @click="outmything">我的办件：</span>
        <img src="../../assets/image/jump_to.png" style="width:22px;height:22px;" @click="outmything">
        <!--
        <i @click="backHome" class="list-close el-icon-circle-close"></i>
        <i @click="outmything" class="list-close el-icon-edit-outline"></i>
        -->
      </div>
    </div>
    <div class="btn-wrap">
          <div v-for="item in tabList" @click="changeTab(item)" :key="item.id" :class="{'act-btn':curTab == item.id}"  class="tab-btn">
              {{ item.name }} 
          </div>
          <!--
          {{statusCount[0]}} -{{statusCount[1]}} -{{statusCount[2]}}-{{statusCount[3]}}-{{statusCount[4]}}
          -->
    </div>
    <div class="list-table">
      <div class="home-table">
        <table class="app-table mything-table">
          <thead>
            <th>办件编号</th>
            <th>办件名称</th>
            <th>受理部门</th>
            <th>申报时间</th>
            <th>状态</th>
            <th>操作</th>
          </thead>
          <tbody v-if="list.length">
            <tr v-for="item in list" :key="item.code">
              <td :title="item.code">{{ item.code }}</td>
              <td :title="item.eventName">{{ item.eventName | filterWords }}</td>
              <td :title="item.deptName">{{ item.deptName | filterWords }}</td>
              <td :title="item.createTime">{{ item.createTime  }}</td>
              <td :title="item.manaStatus">{{ item.manaStatus  }}</td>
              <td class="clearfix">
                  <div class="can-btn fl" @click="openNewPage(item)">详情</div>
              </td>
            </tr>
          </tbody>
          <tbody v-if="!list.length">
            <tr>
              <td>暂无数据</td>
              <td>暂无数据</td>
              <td>暂无数据</td>
              <td>暂无数据</td>
              <td>暂无数据</td>
              <td>暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="page-wrap">
      <el-pagination
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        @current-change="pageChange"
        layout="prev, pager, next,jumper"
        :total="Number(total)"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMyThingData , getUserInfo } from '@/api'
export default {
  data() {
    return {
      list:[],
      pageIndex:1,
      pageSize:10,
      total:0,
      curTab:'3',
      userObj:{},
      tabList:[
        { name:'草稿',id:1,thingStatus:0},
        { name:'待处理',id:2,thingStatus:10},
        { name:'办理中',id:3,thingStatus:30},
        { name:'已完成',id:4,thingStatus:40},
        { name:'已取消',id:5,thingStatus:50}
      ],
      thingStatus:30,
      statusCount:[]
    };
  },
  computed:{
    getUser(){
      return this.$store.state.user;
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    changeTab(item){
      this.curTab = item.id;
      this.thingStatus = item.thingStatus;
      this.getList();
    },

    backHome(){
      this.$router.push({ name:'home' });
    },

    outmything(){
     // let url = 'http://202.61.88.253:8082/app/personalInfo/newAccountLegal/personalInfoForApplyDh/status0'
      let url = 'http://zxbl.sczwfw.gov.cn/app/unified/userCenter/personalInfoForApplyDh/status0';
      window.open(url,"_blank")
    },

    pageChange(num){
      this.pageIndex = num;
      this.getList();
    },
    getData(){
   
      let url = '/sys/sysMember/getMember';
      getUserInfo(url).then(res=>{
        if(res.data.code == 200){
          this.$store.commit('setUserinfo',{ 
            id:res.data.data.id, 
            name:res.data.data.realName,
            mobile:res.data.data.mobile,
            idNo:res.data.data.idNo,
            userType:res.data.data.userType
          })
          this.userObj = res.data.data;
          this.getCountList();
          this.getList();
        }
      })
      
    },
    getList(){

                let url = '/sys/sysMember/getMyThingStatusList';
                let params = {
                    memberId: this.getUser.id,
                    idNumber: this.getUser.idNo, 
                    phoneNumber:this.getUser.mobile,
                    status: this.thingStatus,
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize,
                    userType: this.getUser.userType          //this.getUser.
                }
                getMyThingData(url, params).then(res => {
                    if (res.data.Status == 'true') {
                        this.list = res.data.data || [];
                        this.total = res.data.pager.totalCount || 0;
                    } else {
                        this.list = [];
                        this.total = 0;
                    }
                })
      /*
      let data = {
        "token": "Epoint_WebSerivce_**##0601",
        params:{
          currentpage: this.pageIndex -1,
          pagesize: this.pageSize,
          status:0,
          applyerpagecode:this.userObj.idNo,
          applyername:this.userObj.realName,
          projectname:'',
          applyertype:this.userObj.userType,
          accountguid:this.userObj.id,
          usertype:this.userObj.userType
        }
      }
      let saveToken = window.localStorage.getItem('token');
      this.$axios.post(
        myThingUrl,
        data,
        { headers:{'Authorization':"Bearer "+ saveToken    } },
      ).then(res=>{
        if(res.data.status.code == 200){
          this.list = res.data.custom.projectlist || []
          this.total = res.data.custom.totalcountl;
        }else{
          this.list = [];
          this.total =  0;
        }
      })*/
    },
    getCountList(){

                let url = '/sys/sysMember/getMyThingCount';
                let params = {
                    memberId: this.getUser.id,
                    idNumber: this.getUser.idNo, 
                    phoneNumber:this.getUser.mobile,
                    status: '30',
                    pageNum: this.pageIndex,
                    pageSize: this.pageSize,
                    userType: this.getUser.userType          //this.getUser.
                }
                getMyThingData(url, params).then(res => {
                    if (res.data.Status == 'true') {
                        this.statusCount[0]= res.data.data.status0 || 0;
                        this.statusCount[1]= res.data.data.status10 || 0;
                        this.statusCount[2]= res.data.data.status30 || 0;
                        this.statusCount[3]= res.data.data.status40 || 0;
                        this.statusCount[4]= res.data.data.status50 || 0;
                    } else {
                        this.statusCount[0]= 0;
                        this.statusCount[1]=  0;
                        this.statusCount[2]=  0;
                        this.statusCount[3]=  0;
                        this.statusCount[4]=  0;
                    }
                })
      
    },
    openNewPage(item){
      // let url = 'http://www.xinjiang.gov.cn/xinjiang/grzxbbjxq/fw_blxq.shtml?projectno='+item.projectno
       window.open(item.detailsUrl,"_blank")
    },
  }
};
</script>
